<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" isELIgnored="false"%>

<%@ include file="/WEB-INF/views/shared/taglib.jsp"%>

<%
	String contextPath = request.getContextPath();
	String path = request.getScheme() + "://" + request.getServerName()
			+ ":" + request.getServerPort() + contextPath;
	String save_introPath = "/admin/rel/relative/save_intro";
	String controllerPath = path + "/admin/rel/relative/";
%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>

<html>
<head>
<!-- 1.此处匹配资料：姓名 -->
<title>${relative.relative_firstName}${relative.relative_lastName}</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<link rel="stylesheet" href="<%=path%>/assets/css/main.css" />
<link rel="stylesheet" href="<%=path%>/assets/css/index.css" />
<link rel="stylesheet" href="<%=path%>/assets/css/Normalize.css" />
<link rel="stylesheet" href="<%=path%>/assets/css/header.css" />

<style>
.show {
	display: none;
}
</style>



</head>
<body>

	<!-- Wrapper -->
	<div id="wrapper">
		<!-- Header -->
		<header id="header" class="alt">
			<h1>${relative.relative_firstName}${relative.relative_lastName}</h1>
			<h1></h1>

			<span class="logo" title="点击更换头像"> <!-- 2.此处匹配资料：头像 --> <a
				href="${t_virtualpath}/admin/uploadIcon"> <img src="${iconPath}"
					height="200" />
			</a>

			</span>
			<!-- 3. 此处匹配资料：姓名 -->
			<p>${relative.comments}</p>
		</header>

		<nav id="nav">
			<ul>
				<li><a href="#intro" class="active">简介</a></li>
				<li><a href="#event">事迹</a></li>
				<li><a href="#photo">照片</a></li>
				<li><a href="#radio">视频</a></li>
				<li><a href="#comment">评价</a></li>
				<li><a href="#header">回到顶部</a></li>
			</ul>
		</nav>

		<!-- Main -->
		<div id="main">

			<!-- 简介 -->
			<section id="intro" class="main">
				<section id="intro-left">
					<header class="major">
						<h2>简介</h2>
						<div class="show" id="showButton">
							<button class="button special small " onclick="intro_edit();">编辑</button>
						</div>
					</header>
					<dl class="alt">
						<dt>姓名：</dt>
						<dd>${relative.relative_firstName}${relative.relative_lastName}</dd>
						<dt>性别：</dt>
						<dd>${relative.relative_sex}</dd>
						<dt>职业：</dt>
						<dd>${relative.relative_job}</dd>
						<dt>籍贯：</dt>
						<dd>${relative.relative_province}${relative.relative_city}</dd>
						<dt>生日：</dt>
						<dd>
							<fmt:formatDate value="${relative.relative_birthday}"
								pattern="yyyy-MM-dd " />
						</dd>
						<div id="intro_info_isalive">
							<dt>逝日：</dt>
							<dd>
								<fmt:formatDate value="${relative.relative_deathday}"
									pattern="yyyy-MM-dd " />
							</dd>
							<dt>葬地：</dt>
							<dd>${relative.relative_buryAddress}</dd>

						</div>
					</dl>
				</section>

				<div id="intro-edit" style="display: none;">
					<t:form id="form_intro_edit" commandName="relative"
						action="<%=save_introPath%>" method="post">
						<div class="hide">
							<t:hidden path="relativeId" />
						</div>
						<div>
							<t:textarea rows="5" cols="5" path="relative_information"
								colClass="col-md-30" />
							<div class="row uniform">
								<div class="6u 12u$(medium)">
									<dl class="alt">
										<dt>姓:</dt>
										<dd>
											<t:input type="text" path="relative_firstName" />
										</dd>
										<dt>名:</dt>
										<dd>
											<t:input type="text" path="relative_lastName" />
										</dd>
										<dt>职业：</dt>
										<dd>
											<t:input type="text" path="relative_job" />
										</dd>
										<dt>民族：</dt>
										<dd>
											<t:input type="text" path="relative_nation" />
										</dd>
										<dt>籍贯：</dt>
										<dd>
											<t:input type="text" path="relative_province" />
										</dd>
									</dl>
								</div>
								<div class="6u$ 12u$(medium)">
									<dl class="alt">
										<dt>性别：</dt>
										<dd>
											<select name="relative_sex" colClass="col-md-10">
												<option value="男">男</option>
												<option value="女">女</option>
											</select>
										</dd>
										<dt>状态：</dt>
										<dd>
											<select id="relative_alive" name="relative_alive"
												onchange="show_dead_info()" colClass="col-md-10">
												<option value="0">去世</option>
												<option value="1" selected="selected">健在</option>
											</select>
										</dd>
										<dt>生日：</dt>
										<dd>
											<input class="form-control" type="date"
												name="relative_birthday">
										</dd>
										<div id="deadinfo" style="display: none;">
											<dt>逝日：</dt>
											<dd>
												<input class="form-control" type="date"
													name="relative_deathday">
											</dd>
											<dt>葬地：</dt>
											<dd>
												<input type="text" name="relative_buryAddress">
											</dd>
										</div>
									</dl>
								</div>
							</div>
						</div>
						<div style="padding-top: 10px;">
							<input type="submit" class="button special small" value="保存">
							<input type="cancel" class="button small"
								onclick="intro_cancel();" value="取消">
						</div>
					</t:form>
				</div>

			</section>

			<!-- 事迹：根据需要显示，可隐藏 -->
			<section id="event" class="main">
				<div class="spotlight">
					<div class="content">
						<header class="major">
							<h2>生平事迹</h2>
							<div class="show" id="showButton2">
								<button class="button special small " onclick="edit_event()">编辑</button>
							</div>
						</header>

						<div id="div_event_main">
							<!-- 时间轴 -->
							<section id="cd-timeline" class="cd-container">
								<c:forEach var="event" items="${events}" varStatus="status">
									<div class="cd-timeline-block">
										<div class="cd-timeline-img first">
											<img src="<%=path%>/images/circle.svg"
												alt="${status.index+1}">
										</div>
										<div class="cd-timeline-content">
											<h2>
												<fmt:formatDate value="${event.eventDate}"
													pattern="yyyy-MM-dd " />
											</h2>
											<p>${event.eventInfo}</p>

										</div>
									</div>
								</c:forEach>
							</section>
						</div>

						<div id="div_event_edit" style="display: none;">
							<form method="post" action="<%=controllerPath%>save_event"
								id="form_event_edit">
								<input type="hidden" name="relative_id"
									value="${relative.relativeId}">
								<table
									class="cntable table table-bordered dataTable table-employee ">
									<thead>
										<tr>
											<th style="width: 150px">时间</th>
											<th style="width: 400px">事件</th>
										</tr>
									</thead>
									<tbody id="eventlist">
										<c:forEach var="event" items="${events}" varStatus="status">
											<tr data-id="${event.eventId}">
												<td><input type="date" name="event_date"
													value="${event.getDateOfString()}" /></td>
												<td><input type="text" name="event_info"
													value="${event.eventInfo}"> <input type="hidden"
													name="event_id" value="${event.eventId}"></td>

											</tr>
										</c:forEach>
									</tbody>
								</table>


								<div style="padding-top: 10px;">
									<input type="button" class="button special small"
										onclick="event_submit();" value="保存"> <input
										type="cancel" class="button small" onclick="event_cancel();"
										value="取消">
								</div>
							</form>
							<div style="padding-top: 10px;">
								<button id="btn_add" onclick="add_event()">添加</button>
							</div>

						</div>

					</div>
				</div>
			</section>

			<section id="photo" class="main">
				<div class="spotlight">
					<div class="content">
						<header class="major">
							<h2>照片</h2>

							<div id="photo_main">
								<div id="bigpic">
									<div id="close"></div>
									<span id="left"></span> <img id="view-photo" src="" alt="" />
									<span id="right"></span>
								</div>

								<div id="thumb">
									<c:forEach var="picPath" items="${picPaths}" varStatus="status">
										<img alt="image" height="150" src="${picPath}">
									</c:forEach>
								</div>
								<ul class="actions">


									<center class="show" id="showButton3">
										<a
											href="${t_virtualpath}/admin/upload/uploadImage?name=${relative.relativeId}"
											class="button">上传照片</a>

									</center>
								</ul>
							</div>
						</header>


					</div>

				</div>

			</section>


			<section id="radio" class="main">
				<div class="spotlight">
					<div class="content">
						<header class="major">
							<h2>视频</h2>

							<div id="main">
								<div>

									<c:forEach var="vidPath" items="${vidPaths}" varStatus="status">
										<center></center>
										<video width="320" height="240" src="${vidPath}"
											controls="controls"> 您的浏览器无法播放该视频
										</video>
										</center>
										</br>
									</c:forEach>



								</div>
								<ul class="actions">


									<center class="show" id="showButton4">
										<a
											href="${t_virtualpath}/admin/upload/uploadVideo?name=${relative.relativeId}"
											class="button">上传视频</a>

									</center>
								</ul>
							</div>
						</header>


					</div>

				</div>




			</section>




			<!-- 评价 -->
			<section id="comment" class="main">
				<div class="spotlight">
					<div class="content">
						<header class="major">
							<h2>评价</h2>
						</header>
						<p>${relative.relative_information}</p>
					</div>
				</div>
			</section>

		</div>

		<!-- Footer -->
		<footer id="footer">
			<section>
				<img src="${qrcodePath}"></img>
			</section>
			<section>
				<h2>云忆-让记忆永存</h2>
				<dl class="alt">
					<dt>微信：</dt>
					<dd>我是微信服务号</dd>
					<dt>电话：</dt>
					<dd>我是电话</dd>
					<dt>邮箱：</dt>
					<dd>我是邮箱</dd>
					<dt>官网：</dt>
					<dd>我是网址</dd>
				</dl>
			</section>

			<div class="copyright">
				<ul class="menu">
					<p>&copy; Untitled. All rights reserved.云忆</p>
				</ul>
			</div>
		</footer>

	</div>

	<!-- Scripts -->


	<script type="text/javascript">
		var srcs = [];

		var div1 = document.getElementById("intro_info_isalive");
		var div0 = document.getElementById("deadinfo");

		var div_1 = document.getElementById("showButton");
		var div_2 = document.getElementById("showButton2");
		var div_3 = document.getElementById("showButton3")
		var div_4 = document.getElementById("showButton4")
		var isAlived = '${relative.relative_alive}';
		var key = '${key}';

		if (key == "true") {
			div_1.style.display = "block";
			div_2.style.display = "block";
			div_3.style.display = "block";
			div_4.style.display = "block";

		}

		if (isAlived == "1") {
			div1.style.display = "none";
			div0.style.display = "none";
		} else {
			div1.style.display = "block";
			div0.style.display = "block";

		}
	</script>


	<script type="text/javascript">
		function show_dead_info() {
			var selt = document.getElementById("relative_alive");
			var df = document.getElementById("deadinfo");

			if (selt.selectedIndex == "1") {
				df.style.display = 'none';
			} else {
				df.style.display = 'block';
			}
		}

		function intro_edit() {
			var div2 = document.getElementById("intro-left");
			var div3 = document.getElementById("intro-edit");
			div2.style.display = "none";
			div3.style.display = "block";

		}

		function intro_save() {
			var div2 = document.getElementById("intro-left");
			var div3 = document.getElementById("intro-edit");
			div2.style.display = "block";
			div3.style.display = "none";
			//var form_1=document.getElementById("form_intro_edit");
			//form_1.submit();
			$("#form_intro_edit").submit();
		}

		function intro_cancel() {
			var div2 = document.getElementById("intro-left");
			var div3 = document.getElementById("intro-edit");
			div2.style.display = "block";
			div3.style.display = "none";
			$("#form_intro_edit").cancel();
		}
	</script>

	<script type="text/javascript">
		function add_event() {
			var row = $('<tr><td><input type="date" name="event_date"></td>'
					+ '<td><input type="text" name="event_info">'
					+ '<input type="hidden" name="event_id" value=""></td>'
					+ '</tr>'); //create row
			$('#eventlist').append(row);
		}

		function edit_event() {

			var div4 = document.getElementById("div_event_main");
			var div5 = document.getElementById("div_event_edit");
			div4.style.display = "none";
			div5.style.display = "block";
		}

		function event_submit() {

			var div4 = document.getElementById("div_event_main");
			var div5 = document.getElementById("div_event_edit");
			div4.style.display = "block";
			div5.style.display = "none";

			$("#form_event_edit").submit();
		}

		function event_cancel() {
			var div4 = document.getElementById("div_event_main");
			var div5 = document.getElementById("div_event_edit");
			div4.style.display = "block";
			div5.style.display = "none";
			$("#form_event_edit").cancel();
		}
	</script>

	<script type="text/javascript">
		function addLoadEvent(func) {
			var old = window.onload;
			if (typeof old !== 'function') {
				window.onload = func;
			} else {
				window.onload = function() {
					old();
					func();
				}
			}
		}
		function view(src) {
			var bigpic = document.getElementById("bigpic");
			var viewPhoto = document.getElementById("view-photo");
			if (src) {
				bigpic.style.display = "block";
				viewPhoto.setAttribute("src", src);
			}
		}
		function start() {
			var thumb = document.getElementById("thumb");
			var imgs = thumb.getElementsByTagName("img");
			for (var i = 0; i < imgs.length; ++i) {
				srcs.push(imgs[i].getAttribute("src"));
				console.log(i + imgs[i].getAttribute("src"));
				(function(i) {
					imgs[i].addEventListener("click", function() {
						view(imgs[i].getAttribute("src"))
					});
				})(i);

			}
			var left = document.getElementById("left");
			var right = document.getElementById("right");
			left.addEventListener("click", function() {
				change("left");
			});
			right.addEventListener("click", function() {
				change("right");
			});
		}
		function close() {
			var bigpic = document.getElementById("bigpic");
			var close = document.getElementById("close");
			close.addEventListener("click", function() {
				bigpic.style.display = "none";
			});
		}
		function change(type) {
			var photo = document.getElementById("view-photo");
			var src = photo.getAttribute("src");
			var index = srcs.indexOf(src);
			var nextarc = (type === "left" ? (index - 1 + srcs.length)
					% srcs.length : (index + 1) % srcs.length);
			photo.setAttribute('src', srcs[nextarc]);
		}
		addLoadEvent(start);
		addLoadEvent(close);
	</script>



	<script src="${t_virtualpath}/assets/js/jquery.min.js"></script>
	<script src="${t_virtualpath}/assets/js/jquery.scrollex.min.js"></script>
	<script src="${t_virtualpath}/assets/js/jquery.scrolly.min.js"></script>
	<script src="${t_virtualpath}/assets/js/skel.min.js"></script>
	<script src="${t_virtualpath}/assets/js/util.js"></script>
	<!--[if lte IE 8]>
	<script src="assets/js/ie/respond.min.js"></script><![endif]-->
	<script src="${t_virtualpath}/assets/js/main.js"></script>

</body>
</html>
